<template>
  <div class="xs-header">
    <van-row>
      <van-col span="5" custom-class="xs-text-left">
        <van-icon name="wap-nav" />
      </van-col>
      <van-col span="14">
        <van-button custom-class="van-ellipsis" type="default" size="small ">
          <van-icon name="location" custom-class="location" />
          88 Lermontova St ssssss
        </van-button>
      </van-col>
      <van-col span="5" custom-class="xs-text-right">
        <van-icon name="location" @click="onShowTheme" />
      </van-col>
    </van-row>

    <van-popup :show="themeShow" @close="onCloneTheme" custom-style="width: 300px;">
      <van-cell-group>
        <van-cell title="美女" value="内容" @click="onTheme('dark')" />
        <van-cell title="爱情" value="内容" @click="onTheme('line')" />
      </van-cell-group>
    </van-popup>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  props: {
    'color': String,
    'msg': {
      default: 'Welcome to Megalo'
    }
  },
  data () {
    return {
      value: 'w',
      themeShow: false
    }
  },
  methods: {
    ...mapActions('shop/theme', [
      'set'
    ]),
    onShowTheme () {
      this.themeShow = true
    },
    onCloneTheme () {
      this.themeShow = false
    },
    onTheme (theme) {
      console.log(theme)
      this.set(theme)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
</style>
